<template>
	<div class="index ml-echarts">
		<leftNav></leftNav>

	</div>
</template>

<script>
	export default {

		data() {
			return {

			}
		},
		created() {

		},
		mounted() {
			this.$myEchart({
				'options': {
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						x: 'left',
						data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: true,
								textStyle: {
									fontSize: '30',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: [{
								value: 335,
								name: '直接访问'
							},
							{
								value: 310,
								name: '邮件营销'
							},
							{
								value: 234,
								name: '联盟广告'
							},
							{
								value: 135,
								name: '视频广告'
							},
							{
								value: 1548,
								name: '搜索引擎'
							}
						]
					}]
				},
				"styles":{
					width:'1200px',
					height:"300px",
					border:'10px solid red'
				}
			});
		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style lang="less" scoped="scoped">
.ml-echarts {
	display: flex;
		section {
			text-align: justify;
			margin-top: 30px;
			line-height: 48px;
			font-size: 18px;
		}
	}
</style>
